<template>

  <data-table
    ref="pagingTable"
    :options="options"
    :list-query="listQuery"
  >
    <template #filter-content>

      <el-input v-model="listQuery.params.content" placeholder="搜索题目" size="small" style="width: 200px;" class="filter-item" />

      <dic-list-select v-model="listQuery.params.quType" dic-code="qu_type" size="small" title="选择题型" style="width: 200px;" />

      <el-button v-permission="['exam:detail:record:export']" type="primary" size="small" icon="el-icon-download" class="filter-item" @click="handleExport">导出</el-button>

    </template>

    <template #data-columns>

      <el-table-column
        show-tooltip-when-overflow
        label="试题名称"
        prop="contentText"
      />

      <el-table-column
        label="试题类型"
        prop="quType_dictText"
        align="center"
        width="120px"
      />

      <el-table-column
        label="错误人数"
        prop="userCount"
        align="center"
        width="120px"
      />

      <el-table-column
        label="错误次数"
        prop="errorCount"
        align="center"
        width="120px"
      />

    </template>

  </data-table>

</template>

<script>
import permission from '@/directive/permission/index.js'
import { apiErrorQuExport } from '@/api/stat/exam'

export default {
  directives: { permission },
  data() {
    return {
      listQuery: {
        current: 1,
        size: 10,
        params: {
          examId: '',
          realName: ''
        }
      },

      options: {
        // 可批量操作
        multi: false,
        // 列表请求URL
        listUrl: '/api/stat/exam/error-qu-paging'
      }
    }
  },

  created() {
    this.listQuery.params.examId = this.$route.query.examId
  },
  methods: {
    // 导出数据
    handleExport() {
      apiErrorQuExport(this.listQuery)
    }
  }
}
</script>

<style scoped>

.el-dialog-div{
  height: 60vh;
  overflow: auto;
  padding: 10px;
}

</style>
